<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件data</title>
		<script src="../../vue/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<c7></c7>
		</div>
		<template id="cp"><!-- 分离开来写   把一个计数器封装成组件-->
			<div>
				<h2>当前计数：{{counter}}</h2>
				<button type="button" @click="increment">+</button>
				<button type="button" @click="decrement">-</button>
				
			</div>
		</template>
		<script type="text/javascript">
			//注册一个全局组件  组件也有自己的data  methods方法 
			Vue.component('c7',{
				template:'#cp',
				data(){//存放数据地方  必须是一个函数  有返回值
					return{
						counter:0
						
					}
					
				},
				methods:{
					increment(){
						this.counter++;
					},
					decrement(){
						this.counter--;
						if(this.counter == 0){
							counter = 0 ;
						}
					}
				}
			});
			var app = new Vue({
				el:'#app',
				data:{
					
				}
			});
		</script>
	</body>
</html>
